<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    function isObject(val) {
        return typeof val === 'object' && typeof val != null
    }

    function shallowRef(val) {
        return shallowReactive({value: val})
    }

    function shallowReactive(val) {
        return new Proxy(val, {
            get(target, property, receiver) {
                console.log('get', target, property)
                return Reflect.get(target, property, receiver)
            },
            set(target, property, value, receiver) {
                console.log('set', target, property, value)
                return Reflect.set(target, property, value, receiver)
            },
            deleteProperty(target, property) {
                console.log('delete',target, property)
                return Reflect.deleteProperty(target, property)
            }
        })
    }

    function reactive(val) {

        if (!isObject(val)) {
            return val
        }

        return new Proxy(val, {
            get(target, property, receiver) {
                console.log('get', target, property)
                const res = Reflect.get(target, property, receiver)
                return isObject(val) ? reactive(res) : res
            },
            set(target, property, value, receiver) {
                console.log('set', target, property, value, target[property])
                return Reflect.set(target, property, value, receiver)
            },
            deleteProperty(target, property) {
                console.log('delete',target, property)
                return Reflect.deleteProperty(target, property)
            }
        })
    }

    function ref(val) {
        return reactive({value: val})
    }

    // let obj = {
    //     age: 10,
    //     children: [],
    //     other: {
    //         name: 'lisi'
    //     }
    // }
    // let resObj = shallowReactive(obj)
    // // 添加属性
    // resObj.name = 'zhangsan'
    // // 修改属性
    // resObj.age = 20
    // // 访问属性
    // resObj.name
    // // 删除属性
    // delete resObj.name
    // // 对象本生的改变监听不到
    // resObj = null
    // // 深层次的内容无法监听，proxy是浅监听
    // obj.children.push(1)
    // obj.other.name = 'lisiyi'

    let arr = [];
    let obj = {
        arr: []
    }
    let proxy = reactive(arr);
    let proxy2 = reactive(obj);
    proxy2.arr = [1];
    // proxy = [1]
    // console.log(proxy)
</script>
</body>
</html>
